<template>
  <div id="body">
    <div class="box">
      <!-- <div>
        <img src="https://z3.ax1x.com/2021/05/21/g7hkdO.jpg" />
      </div> -->
      <form ref="formRef" @submit.prevent="onSubmit">
        <h1>注册页面</h1>
        <p>
          <input
            type="text"
            name="username"
            id="username"
            placeholder="请输入管理员账号"
            v-model="value.username"
          />
        </p>
        <p>
          <input
            name="password"
            type="password"
            id="password"
            placeholder="请输入你密码"
            v-model="value.password"
          />
        </p>
        <p>
          <input type="text" name="code" id="code" placeholder="请输入邀请码" v-model="value.code" />
        </p>
        <p>
          <button @click="submit">注册</button>
        </p>
      </form>
    </div>
  </div>
</template>


<script>
export default {
  name: "App",
  props: [],
  components: {},
  data() {
    return {
      value: {
        username: "",
        password: "",
        code: ""
      }
    };
  },
  //方法 函数写这里
  methods: {
    onSubmit: function() {
      return false;
    },
    async submit() {
      if (
        this.value.username == "" ||
        this.value.password == "" ||
        this.value.code == ""
      ) {
        return this.$message.error("注册失败 请重新输入!!!");
      }
      const res = await this.$http.get("/register", {})
      console.log(res);
    }
  },
  //计算属性
  computed: {},
  //侦听器
  watch: {},
  //过滤器
  filters: {},
  //以下是生命周期
  //组件创建之前
  beforeCreate() {},
  //组件创建之后
  created() {},
  //页面渲染之前
  beforeMount() {},
  //页面渲染之后
  mounted() {},
  //页面视图数据更新之前
  beforeUpdate() {},
  //页面视图数据更新之后
  updated() {},
  //页面销毁之前
  beforeDestroy() {},
  //页面销毁之后
  destroyed() {}
};
</script>
<style lang="scss" scoped>
form {
  width: 300px;
  height: 240px;
  background-color: white;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
form input {
  width: 280px;
  height: 24px;
  border: 0px;
  border-bottom: 1px solid rebeccapurple;
}
form button {
  width: 100px;
  height:40px;
  border-radius: 25px;
  background-color: aqua;
}
h1 {
  color: rebeccapurple;
}
img {
  border-radius: 25px;
}
</style>
